<template>
	<view class="home">
		<view class="abrall">
			<view class="abratite">
				<view class="text">
					流速仪名称：
				</view>
				<view class="input">
					<uni-easyinput v-model="liusuyiItem.name" :styles="styles" :placeholderStyle="placeholderStyle"
						placeholder="请输入流速仪名称"></uni-easyinput>
				</view>
			</view>
			<view class="abranub">
				<view class="text">
					a系数：
				</view>
				<view class="input">
					<uni-easyinput type="digit" v-model="liusuyiItem.aa" :styles="styles" :placeholderStyle="placeholderStyle"
						placeholder="a系数范围：0 - 1"></uni-easyinput>
				</view>
			</view>
			<!-- 			<view class="fanwei">
				a系数范围：0.0-6.0
			</view> -->
			<view class="abranub">
				<view class="text">
					b系数：
				</view>
				<view class="input">
					<uni-easyinput type="digit" v-model="liusuyiItem.bb" :styles="styles" :placeholderStyle="placeholderStyle"
						placeholder="b系数范围：0 - 1"></uni-easyinput>
				</view>
			</view>
			<!-- 			<view class="fanwei">
				b系数范围：0.0-6.0
			</view> -->
			<view class="abranub">
				<view class="text">
					C系数：
				</view>
				<view class="input">
					<uni-easyinput type="digit" v-model="liusuyiItem.cc" :styles="styles" :placeholderStyle="placeholderStyle"
						placeholder="C系数范围：1-100"></uni-easyinput>
				</view>
			</view>
			<!-- 			<view class="fanwei">
				C系数范围：1-100
			</view> -->
		</view>
		<!-- 流速仪公式 -->
		<view class="formula">
			<view class="formulatop">
				流速公式：V=a+bn，n=N*C/T
			</view>
			<view class="formulabom">
				<view class="formulabom">
					<view class="formulaitem">
						a：仪器常数
					</view>
					<view class="formulaitem">
						b：水力螺距
					</view>
					<view class="formulaitem">
						C：转数比
					</view>
					<view class="formulaitem">
						n：转 速
					</view>
					<view class="formulaitem">
						N：信号数
					</view>
					<view class="formulaitem">
						T：信号时长
					</view>
				</view>
			</view>
		</view>
		<view class="" style="padding: 50rpx;" @click="saveCezhan">
			<u-button type="success" shape="circle" text="保存流速仪"></u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				placeholderStyle: "color:#c1c1c1;font-size:14px",
				styles: {
					color: '#999999',
					borderColor: '#c3c3c3'
				},
				liusuyiItem: {
					id: null, //vuex_liusuyiList
					name: "",
					aa: '',
					bb: '',
					cc: '',
				},
			}
		},
		onLoad(options) {

		},
		onShow() {

		},
		destroyed() {
			console.log('销毁');
		},
		methods: {
			// 保存流速仪信息
			saveCezhan() {
				if (!(this.liusuyiItem.aa *1 >= 0 && this.liusuyiItem.aa *1 <= 6)) {
					uni.showToast({
						title: '未输入正确数值',
						duration: 1500
					})
					return
				}
				if (!(this.liusuyiItem.bb *1 >= 0 && this.liusuyiItem.bb *1 <= 6)) {
					uni.showToast({
						title: '未输入正确数值',
						duration: 1500
					})
					return
				}
				if (!(this.liusuyiItem.cc *1 >= 1 && this.liusuyiItem.cc *1 <= 100)) {
					uni.showToast({
						title: '未输入正确数值',
						duration: 1500
					})
					return
				}
				let date = Date.parse(new Date())
				this.liusuyiItem.id = date

				let datalist = []
				datalist = this.vuex_liusuyiList
				datalist.push(this.liusuyiItem)
				uni.$u.vuex('vuex_liusuyiList', datalist)
				uni.navigateBack({
					delta: 1
				});
			}
		}
	}
</script>
<style>
	page {
		background-color: #f8f8f8;
	}
</style>
<style scoped lang="scss">
	//流速仪
	.abrall {
		width: 590rpx;
		padding: 50rpx;
		margin: 20rpx 30rpx;
		border-radius: 30rpx;
		background-color: #fff;
		box-shadow: 0rpx 5rpx 20rpx #bfbfbf;

		.abratite {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 30rpx 0;
			font-size: 40rpx;
			color: #46b345;

			.text {
				width: 260rpx;
				display: inline-block;
				text-align-last: justify;
				// background-color: #ffaa7f;
			}

			.input {
				width: 320rpx;
				// background-color: #aa55ff;
			}
		}

		.abranub {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 30rpx 0 10rpx 0;
			font-size: 40rpx;
			color: #46b345;

			.text {
				width: 260rpx;
				display: inline-block;
				text-align-last: justify;
				// background-color: #ffaa7f;
			}

			.input {
				width: 320rpx;
				// background-color: #aa55ff;
			}
		}

		.fanwei {
			margin-bottom: 30rpx;
			text-align: center;
		}
	}

	//流速公式
	.formula {
		width: 750rpx;
		margin-top: 40rpx;
		display: flex;
		flex-direction: column;
		align-items: center;

		.formulatop {
			width: 650rpx;
			padding: 20rpx 0;
			text-align: center;
			line-height: 80rpx;
			font-size: 40rpx;
			border-radius: 15rpx 15rpx 0 0;
			background-color: #46b345;
			color: #ffffff;
		}

		.formulabom {
				width: 650rpx;
				padding: 20rpx 0;
				text-align: center;
				line-height: 70rpx;
				font-size: 40rpx;
				border-radius: 0 0 15rpx 15rpx;
				background-color: #cbd8e2;
				color: #ffffff;
				display: flex;
				flex-wrap: wrap;
				align-content: space-around;
				justify-content: space-around;
				
				.formulaitem {
					width: 280rpx;
					height: 70rpx;
					margin: 20rpx;
					line-height: 70rpx;
					border-radius: 10rpx;
					background-color: #ffffff;
					color: #46b345;
				}
		}
	}
</style>